<template>
  <base-modal :title="$t('common.base.approve')" :show.sync="visible" width="600px" class="approve-performance-modal" @closed="reset">

    <ul class="approve-info">
      <li>
        <label>{{$t('common.base.serialNumber')}}：</label> {{approveData.name}}
      </li>
      <li>
        <label>{{$t('common.base.source')}}：</label> {{$t('common.base.performanceReporting')}}
      </li>
      <li>
        <label>{{$t('common.base.type')}}：</label> {{approveData.type}}
      </li>
      <li>
        <label>{{$t('common.record.processNode')}}：</label> {{$t('common.base.release')}}
      </li>
      <li>
        <label>{{$t('common.base.content')}}：</label> {{$t('common.base.release')}} {{approveData.name}}
      </li>
      <li>
        <label>{{$t('common.label.sponsor')}}：</label> 
        <template v-if="isOpenData && approveData.proposerStaffId">
          <open-data type="userName" :openid="approveData.proposerStaffId"></open-data>
        </template>
        <template v-else>
          {{approveData.proposerName}}
        </template> 
      </li>
      <li>
        <label>{{$t('common.label.launchTime')}}：</label> {{approveData.proposerTime}}
      </li>
      <li>
        <label>{{$t('common.label.launchRemark')}}：</label> {{approveData.applyRemark}}
      </li>
      <li>
        <label>{{$t('common.label.approvalResult')}}：</label>
        <el-radio v-model="form.result" label="success">{{$t('common.base.agree')}}</el-radio>
        <el-radio v-model="form.result" label="fail">{{$t('common.label.disagree')}}</el-radio>
      </li>
      <li>
        <label>{{$t('common.label.approvalRemark')}}：</label>
        <el-input type="textarea" v-model="form.approveRemark" resize="none" rows="3" :maxlength="500"></el-input>
      </li>
    </ul>


    <p class="tip">{{$t('common.base.remark')}}：{{$t('common.label.unmodifyApprovalResult')}}</p>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="onSubmit" :disabled="pending" >{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import {approvePerformance} from '@src/api/PerformanceApi';

export default {
  name: 'approve-dialog',
  props: {
    approveData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      pending: false,
      init: false,
      form: {
        result: 'success',
        approveRemark: '',
      }
    }
  },
  methods: {
    open() {
      this.init = true;
      this.visible = true;
    },
    onSubmit() {
      this.pending = true;

      approvePerformance({
        ...this.form,
        reportId: this.approveData.reportId,
      })
        .then(res => {

          this.pending = false;

          if (res.status) return this.$platform.notification({
            title: this.$t('common.base.appreoveFail'),
            message: res.message || '',
            type: 'error',
          });

          this.$platform.notification({
            title: this.$t('common.base.approveSuccess'),
            type: 'success',
          });

          let fromId = window.frameElement.getAttribute('fromid');
          this.$platform.refreshTab(fromId);

          return window.location.reload()
        })
        .catch(e => console.error('e', e));
    },
    reset() {
      this.init = false;
    },
  },
}
</script>

<style lang="scss">

  .approve-performance-modal {

    .approve-info {
      margin: 0;
      padding: 15px 0 0;

      li {
        list-style: none;
        display: flex;
        word-break: break-all;

        label {
          width: 100px;
          margin: 0;
          line-height: 26px;
          flex-shrink: 0;
        }
      }
    }

    .tip {
      margin: 10px 0 0;
      line-height: 26px;
      font-size: 12px;
      color: #999;
    }

    .base-modal-body {
      padding: 0 30px;
    }

    .dialog-footer {
      text-align: right;
      /*padding: 15px 0 ;*/
    }
  }
</style>